<template>
	<view class="order-wrapper">
		<u-sticky bgColor="#fff">
			<u-tabs  lineColor="#F33C72" :list="tabList" :scrollable="false" @click="changeTab"></u-tabs>
		</u-sticky>
		<view class="order-list">
			<view class="order-item" v-for="item in orderList" :key="item.orderId">
				<view class="store-msg">
					<view class="flex-c-s" @click="goToOrderDetails(item)">
						<view class="flex-c" style="align-items: center;">
							<image class="store-icon"  src="/static/images/store-b.png" mode=""></image>
							<view>{{item.store.storeName}}</view>
							<uni-icons type="forward" color="#999" size="20"></uni-icons>
						</view>
						<view>
							<!-- 1、待付款 2、付款中 3、款失败 4、付款完成 5、待退款 6、款中7、退款完成 -->
							<uni-tag v-if="item.payStatus === 1" text="待付款" custom-style="background-color: #FF6F99; border-color: #FF6F99; color: #fff;"></uni-tag>
							<uni-tag v-if="item.payStatus === 2" text="付款中" custom-style="background-color: #FFC75B; border-color: #FFC75B; color: #fff;"></uni-tag>
							<uni-tag v-if="item.payStatus === 3" text="款失败" custom-style="background-color: #F33C72; border-color: #F33C72; color: #fff;"></uni-tag>
							<uni-tag v-if="item.payStatus === 4" text="付款完成" custom-style="background-color: #22D49D; border-color: #22D49D; color: #fff;"></uni-tag>
							<uni-tag v-if="item.payStatus === 5" text="待退款" custom-style="background-color: #5B9CFF; border-color: #5B9CFF; color: #fff;"></uni-tag>
							<uni-tag v-if="item.payStatus === 6" text="退款中" custom-style="background-color: #BDBDBD; border-color: #BDBDBD; color: #fff;"></uni-tag>
							<uni-tag v-if="item.payStatus === 7" text="退款完成" custom-style="background-color: #BDBDBD; border-color: #BDBDBD; color: #fff;"></uni-tag>
						</view>
					</view>
				</view>
				<view class="goods-wrapper" @click="goToOrderDetails(item)">
					<view class="goods-item flex-c-s" >
						<view class="flex-c">
							<image class="goods-pic"  :src="item.product.listImage" mode=""></image>
						</view>
						<view class="goods-msg">
							<view class="goods-top flex-c-s">
								<view class="goods-title">
									{{ item.product?.productDetail.name }}
								</view>
								<view class="goods-price">
									<view class="">
										<view>￥{{ item.product?.productDetail.sellingPrice }}</view>
										<view style="color: #999999;margin-left: 10rpx;">共{{ item.productQuantity }}件</view>
									</view>
									<view class="fz26 color999">
										已售 {{ item.product.productDetail?.sold}} 件
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-c-s fz26 mb15" @click="goToOrderDetails(item)">
					<text class="color666">备注：</text><text class="color666">{{ item.remark || '-'}}</text>
				</view>
				<view class="order-msg flex-c">
					<view>
						{{ item.createdAt }}
					</view>
					<view class="price">
						<view>实付款￥</view><view class="priceNum">{{ item.totalProductPrice }}</view>
					</view>
				</view>
				<view class="order-menu">
					<!-- <view class="shouhou order-status-btn">申请售后</view> -->
					<view v-if="item.payStatus === 1" class="fukuan order-status-btn wuliu" @click="cancelOrder(item)">取消订单</view>
					<view v-if="item.payStatus === 1" class="fukuan order-status-btn" @click="goToOrderDetails(item)">去付款</view>
					<!-- <view class="shouhuo order-status-btn">确认收货</view> -->
				</view>
			</view>
			<view class="no-data" v-if="!orderList.length">
				<NoData />
			</view>
			<u-loadmore v-show="orderList.length" :status="statusText" marginTop="20" :loading-text="loadingText"
			        :loadmore-text="loadmoreText"  :nomore-text="nomoreText" line />
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed } from 'vue'
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
import { orders, cancelOrders } from '@/http/my'

import NoData from '@/components/NoData.vue'

import type { IOrder } from '@/types'

export default defineComponent({
	components: { NoData },
	setup() {
		const state = reactive({
			tabList: [
				{ name: '全部', index: null}, 
				{ name: '待付款', index: 1}, 
				{ name: '已取消', index: 2},  
				{ name: '已完成', index: 3},
			],
			total: 0,
			pageSize: 10,
			page: 1,
			payStatus: null,
			orderStatus: null as null | number,
			orderList:[] as Array<IOrder>,
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '没有更多了',
		})
		
		onShow( async () => {
			state.page = 1
			state.orderList = []
			orderListFun()
		})
		
		onReachBottom(() => {
			if(state.total === 0) return;
			if(state.total === state.orderList.length) return;
			state.page ++
			orderListFun()  
		})
		
		const statusText = computed(() => {
			return state.total === state.orderList.length ? 'nomore' : 'loadmore'
		})
		
		const orderListFun = async () => {
			uni.showLoading({ title: '加载中' })
			let pramas = {
				page: state.page,
				pageSize: state.pageSize,
				payStatus: state.payStatus,
				orderStatus: state.orderStatus,
			}
			let res = await orders(pramas) 
			 console.log(res);
			if(res.code === 0) {
				state.orderList = [...state.orderList, ...(res.data?.list || [])] 
				state.total = res.data?.total
			}  
			uni.hideLoading()
		}
		
		const changeTab = (item: {name: string, index: number}) => {
			state.page = 1
			state.orderStatus = item.index
			state.orderList = []
			orderListFun() 
		}
		
		const goToOrderDetails = (item: IOrder) =>{
			
			uni.navigateTo({
				url:`/pages/myPackge/order/details?id=${item.id}`
			})
		}
		
		const cancelOrder = async (item: IOrder) => {
			uni.showModal({
				title: '提示',
				content: '确定取消该订单吗？',
				async success({confirm}) {
					if(confirm) {
						let res = await cancelOrders(item.payCode) 
						if(res.code === 0) {
							uni.showToast({ title: '订单取消成功', icon: 'success' })
							state.page = 1
							state.orderList = []
							orderListFun()
						} else {
							uni.showToast({ title: res.msg||'订单取消失败', icon: 'none' })
						}
					}
				}
			})
			
		}
		
		return {
			changeTab,
			orderListFun,
			goToOrderDetails,
			statusText,
			cancelOrder,
			...toRefs(state)
		}
	}
})
</script>

<style>
	page{ background-color: #f8f8fa;}
</style>

<style lang="scss" scoped>
.order-wrapper{
	padding-bottom: 24rpx;
	.order-list{
		padding: 0 24rpx;
		.order-item{
			background: #ffffff;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-top: 20rpx;
			.store-msg{
				.store-icon{
					width: 32rpx;
					height: 32rpx;
					margin-right: 14rpx;
				}
			}
			.goods-wrapper{
				border-radius: 16rpx;
				overflow: hidden;
				background: #f8f8fa;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				.goods-item{
					justify-content: flex-start;
					.goods-pic{
						width: 170rpx;
						height: 170rpx;
						margin-right: 10rpx;
					}
					.goods-msg{
						padding: 20rpx;
						flex: 1;
						.goods-top{
							font-size: 26rpx;
							font-weight: 500;
							text-align: LEFT;
							color: #333333;
							line-height: 44rpx;
							display: flex;
							align-items: flex-start;
							justify-content:space-between;
							.goods-title{
								display: flex;
								flex-grow:3;
							}
							.goods-price{
								text-align: right;
								// display: flex;
								// flex-direction: column;
								// align-items: flex-end;
								// flex-grow:1;
							}
						}
					}
				}
			}
			.order-msg{
				justify-content: space-between;
				align-items: flex-end;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				color: #999999;
				.price{
					display: flex;
					align-items: baseline;
					color:#333333;
					.priceNum{
						color:#333333;
						font-size: 40rpx;
						display: flex;
						align-items: baseline;
					}
				}
			}
			.order-menu{
				display: flex;
				justify-content: flex-end;
				margin-top: 20rpx;
				.order-status-btn{
					width: 166rpx;
					height: 66rpx; 
					border-radius: 34rpx;
					text-align: center;
					line-height: 66rpx;
				}
				.shouhou{ 
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC-500;
					font-weight: 500;
					color: #666666;
					margin-left: 15rpx;
				}
				.wuliu{  
					background: #F8F8FA !important;
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC-500;
					font-weight: 500;
					color: #333333 !important;
					margin-left: 15rpx;
				}
				.fukuan{
					background: #f9dee8;
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC-500;
					font-weight: 500;
					margin-left: 15rpx;
					color: #f33c72;
				}
				.shouhuo{ 
					background: #f9dee8;
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC-500;
					font-weight: 500;
					margin-left: 15rpx;
					color: #f33c72; 
				}
			}
		}
	}
	
}
</style>